import { BrowserRouter, Routes, Route, Link, HashRouter, useNavigate, useSearchParams, useParams } from 'react-router-dom'

function Home() {
  const navigate = useNavigate()
  return (
    <div>
      <h2>首页</h2>
      {/* <button onClick={() => navigate('/about?id=1001', {replace: true})}>go about</button> */}

      <button onClick={() => navigate('/about/1001', {replace: true})}>go about</button>

    </div>
  )
}

function About() {
  // const [params, setParams] = useSearchParams()
  // console.log(params.get('id'));

  const params = useParams()
  console.log(params);
  
  return (
    <div>
      {/* <h2>关于 -- {params.get('id')}</h2> */}
      <h2>关于 -- {params.id}</h2>

    </div>
  )
}

function App() {
  return (
    <div className="App">
      {/* 路由配置区域 */}
      <HashRouter>

        <Link to='/'>首页</Link>
        <Link to='/about'>关于</Link>

        {/* 路由出口 */}
        <Routes>
          <Route path='/' element={<Home />}></Route>
          {/* <Route path='/about' element={<About />}></Route> */}
          <Route path='/about/:id' element={<About />}></Route>

        </Routes>

      </HashRouter>


    </div>
  )
}

export default App